<template>
  <div class="table-main">
    <el-dialog
      @close="handMyClose"
      :append-to-body="true"
      title="汽车服务"
      :visible.sync="dialogVisible1"
      width="60%"
      :close-on-click-modal="false"
    >
      <div style="margin-top:50px;">
        <el-form ref="form" :model="form" label-width="120px" :rules="rules">
          <el-row :gutter="20" justify="center" type="flex">
            <el-col :span="16">
              <el-form-item label="会员名称:" prop="vipName">
                <el-input
                  :disabled="isShow == 3"
                  v-model="form.vipName"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" justify="center" type="flex">
            <el-col :span="16">
              <el-form-item label="会员包含项目:">
                <el-button
                  v-if="isShow != 3"
                  style="margin-bottom:10px"
                  type="primary"
                  size="small"
                  icon="el-icon-plus"
                  @click="handAdd()"
                  >添加</el-button
                >
                <el-table
                  border
                  ref="multipleTable"
                  :data="form.vipDetails"
                  tooltip-effect="dark"
                  style="width: 100%"
                >
                  <el-table-column label="项目名称" prop="keyName">
                    <template slot-scope="scope">
                      <el-input
                        :disabled="isShow == 3"
                        v-model="scope.row.keyName"
                        placeholder="请输入"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="简介备注" prop="remaker">
                    <template slot-scope="scope">
                      <el-input
                        :disabled="isShow == 3"
                        v-model="scope.row.remaker"
                        placeholder="请输入"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="项目次数" prop="valueNum">
                    <template slot-scope="scope">
                      <el-input
                        :disabled="isShow == 3"
                        v-model="scope.row.valueNum"
                        placeholder="请输入"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" v-if="isShow != 3">
                    <template slot-scope="scope">
                      <div class="shop_btns">
                        <!-- <el-button
                          type="text"
                          @click="handEdit(scope.row)"
                        >{{scope.row.ifShow?'保存':'编辑'}}</el-button>-->
                        <el-button
                          type="text"
                          @click="handDel(scope.row, scope.$index)"
                          slot="reference"
                          >删除</el-button
                        >
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" justify="center" type="flex">
            <el-col :span="16">
              <el-form-item label="会员价格:" prop="price">
                <el-input
                  :disabled="isShow == 3"
                  v-model="form.price"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" justify="center" type="flex">
            <el-col :span="16">
              <el-form-item label="级别排序:" prop="vipDesc">
                <el-input
                  :disabled="isShow == 3"
                  v-model="form.vipDesc"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" justify="center" type="flex">
            <el-col :span="16">
              <el-form-item label="会员促销信息:" prop="contentInfo">
                <el-input
                  :disabled="isShow == 3"
                  v-model="form.contentInfo"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" justify="center" type="flex">
            <el-col :span="16">
              <el-form-item label="商家店铺:" prop="shopId">
                <el-select
                  filterable
                  :disabled="isShow == 3"
                  v-model="form.shopId"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in findAllsList"
                    :key="item.id"
                    :label="item.shopName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" justify="center" type="flex">
            <el-col :span="16">
              <el-form-item label="是否默认会员:" prop="isDefault">
                <el-select
                  :disabled="isShow == 3"
                  @change="handDefault"
                  filterable
                  v-model="form.isDefault"
                  placeholder="请选择"
                >
                  <el-option label="是" :value="1"></el-option>
                  <el-option label="否" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row
            :gutter="20"
            justify="center"
            type="flex"
            v-if="form.isDefault != 1"
          >
            <el-col :span="16">
              <el-form-item label="会员有效期/天:" prop="timeOut2">
                <el-input
                  @input="changeInput"
                  :disabled="isShow == 3"
                  v-model="form.timeOut2"
                  placeholder="请输入"
                ></el-input>
                <!-- <el-date-picker
                  :disabled="isShow==3"
                  v-model="form.timeOut"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="timestamp"
                ></el-date-picker>-->
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" justify="center" type="flex">
            <el-col :span="16">
              <el-form-item label="会员banner:" prop="img">
                <el-upload
                  v-if="isShow != 3"
                  :on-error="onError"
                  :headers="headers"
                  accept=".jpg,.png,.gif.svg,.bmp,.jpeg"
                  class="avatar-uploader"
                  :action="$store.state.app.newUrl + '/admin/wxUser/uoloadfile'"
                  :show-file-list="false"
                  :on-success="handSuccess2"
                  :before-upload="beforeAvatarUpload2"
                >
                  <img
                    v-if="form.img != undefined"
                    :src="form.img"
                    class="avatar2"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon2"></i>
                  <!-- <div slot="tip" class="el-upload__tip">只能上传672*180大小的图片</div> -->
                </el-upload>
                <img v-if="isShow == 3" :src="form.img" class="avatar2" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" justify="center" type="flex">
            <el-col :span="16">
              <el-form-item label="会员小图标:" prop="icon">
                <el-upload
                  :on-change="uploadChange"
                  v-loading="loading2"
                  v-if="isShow != 3"
                  :on-error="onError"
                  :headers="headers"
                  accept=".jpg,.png,.gif.svg,.bmp,.jpeg"
                  class="avatar-uploader"
                  :action="$store.state.app.newUrl + '/admin/wxUser/uoloadfile'"
                  :show-file-list="false"
                  :on-success="handSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img
                    v-if="form.icon != undefined"
                    :src="form.icon"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  <!-- <div slot="tip" class="el-upload__tip">只能上传672*180大小的图片</div> -->
                </el-upload>
                <img v-if="isShow == 3" :src="form.icon" class="avatar" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button
          type="primary"
          @click="handFromSub('form')"
          :loading="bntLoading"
          v-if="isShow != 3"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { imgSizi } from "@/utils/myUtils";
export default {
  name: "SidebarLogo",
  components: {},
  watch: {
    isState(newObj) {
      this.isShow = newObj;
    }
  },
  props: {
    isState: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      bntLoading: false,
      loading2: false,
      rules: {
        price: [
          { required: true, message: "请输入价格", trigger: "blur" },
          {
            validator(rule, value, callback) {
              var reg = /^[0-9]{1}([0-9]|[.])*$/;
              if (reg.test(value)) {
                callback();
              } else {
                callback(new Error("请输入价格必须为数字"));
              }
            },
            trigger: "blur"
          }
        ],

        timeOut2: [
          { required: true, message: "请输入有效期", trigger: "blur" },
          {
            validator(rule, value, callback) {
              var reg = /^[0-9]{1}([0-9]|[.])*$/;
              if (reg.test(value)) {
                callback();
              } else {
                callback(new Error("请输入有效期必须为数字"));
              }
            },
            trigger: "blur"
          }
        ],

        vipDesc: [
          { required: true, message: "请输入排序级别", trigger: "blur" },
          {
            validator(rule, value, callback) {
              var reg = /^[0-9]{1}([0-9]|[.])*$/;
              if (reg.test(value)) {
                callback();
              } else {
                callback(new Error("请输入排序级别必须为数字"));
              }
            },
            trigger: "blur"
          }
        ],
        vipName: [
          { required: true, message: "请输入会员名称", trigger: "blur" }
        ],
        icon: [{ required: true, message: "请上传图片", trigger: "blur" }],
        img: [{ required: true, message: "请上传图片", trigger: "blur" }],
        shopId: [
          { required: true, message: "请选择商家店铺", trigger: "change" }
        ],
        isDefault: [
          { required: true, message: "请选择是否为默认会员", trigger: "change" }
        ]
      },
      headers: {
        token: localStorage.getItem("mytoken") || ""
      },
      form: {
        vipDetails: []
      },
      shopStatusOptions: [],
      isShow: 0,
      imageUrl: "",
      dialogImageUrl: "",
      dialogVisible1: false,
      addressKeyword: "",
      activeName: "first",
      dialogVisible: false,
      tipShow: false,
      findAllsList: []
    };
  },
  async mounted() {
    this.findAllsList = (await this.$api.userByShop()).data.data;
  },
  methods: {
    handDefault(val) {
      console.log(val);
    },
    changeInput() {
      this.$forceUpdate();
    },
    handDel(item, index) {
      console.log(item, index);
      this.form.vipDetails.splice(index, 1);
    },
    handEdit(item) {
      if (item.ifShow) {
        this.$set(item, "ifShow", false);
      } else {
        this.$set(item, "ifShow", true);
      }

      console.log(item, "aaaaaaaaaa");
    },
    handEdit2(item) {
      this.$set(item, "ifShow", true);
      console.log(this.form);
    },
    handAdd() {
      this.form.vipDetails.push({
        keyName: "",
        valueNum: "",
        remaker: "",
        ifShow: true
      });
    },
    handSeleDel() {},
    uploadChange() {},
    onError() {},
    handGetShop(id) {
      this.$api.selectVipByIdVip({ id }).then(res => {
        res.data.data.vipDetails.forEach(item => {
          item.ifShow = false;
        });
        this.form = res.data.data;
        this.form.timeOut2 = this.form.timeOut / 24 / 60 / 60 / 1000;
        this.form.timeOut2 = parseInt(this.form.timeOut2);
        console.log("查询轮播详情2", this.form);
      });
    },
    handSuccess(res, file) {
      var url = JSON.parse(res.message);
      this.$set(this.form, "icon", url.url);
      this.loading2 = false;
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isSize;
    },
    handSuccess2(res, file) {
      var url = JSON.parse(res.message);
      this.$set(this.form, "img", url.url);
      this.loading2 = false;
    },
    beforeAvatarUpload2(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isSize;
    },
    handMyClose() {
      this.$refs.form.resetFields();
      this.$parent.closeFrom();
      // for (let key in this.form) {
      //   this.form[key] = ''
      // }
      this.form.vipDetails = [];
    },
    handFromSub(formName) {
      //1编辑
      if (this.isState == 1) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            if (this.form.isDefault == 1) {
              this.form.timeOut = 0;
            } else {
              this.form.timeOut = this.form.timeOut2 * 24 * 60 * 60 * 1000;
            }

            this.bntLoading = true;
            this.$api
              .editVip(this.form)
              .then(res => {
                this.dialogVisible1 = false;
                this.$parent.init();
                console.log(res, "编辑", this.form);
                this.$message({
                  message: res.data.message,
                  type: "success"
                });
                this.bntLoading = false;
              })
              .finally(() => {
                this.bntLoading = false;
              });
          } else {
            console.log("error submit!!");
            this.$message({
              message: "请完成表单录入"
            });
            this.bntLoading = false;
            return false;
          }
        });
      } else if (this.isState == 0) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            if (this.form.isDefault == 1) {
              this.form.timeOut = 0;
            } else {
              this.form.timeOut = this.form.timeOut2 * 24 * 60 * 60 * 1000;
            }

            this.bntLoading = true;
            this.$api
              .addVip(this.form)
              .then(res => {
                this.dialogVisible1 = false;
                this.bntLoading = false;
                this.$parent.init();
                this.$refs.form.resetFields();
                console.log(res, "添加vip,表单验证", this.form);
                this.$message({
                  message: res.data.message,
                  type: "success"
                });
              })
              .finally(() => {
                this.bntLoading = false;
              });
          } else {
            console.log("error submit!!");
            this.$message({
              message: "请完成表单录入"
            });
            return false;
          }
        });
      }
    },

    // handSuccess(response, file, fileList) {
    //   console.log(response, file, fileList, '成功回调')
    //   this.form.shopImg = response.message
    // },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // handlePictureCardPreview(file) {
    //   this.dialogImageUrl = file.url
    //   this.dialogVisible2 = true
    // },
    handleClose() {
      this.dialogVisible = false;
    },
    handMapShow() {
      this.dialogVisible = true;
    },
    handleClick() {}
  }
};
</script>

<style lang="scss" scoped>
.vipProjeck {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .pro_item {
    width: 20%;
  }
}
.map_btn {
  width: 82px;
  height: 22px;
  background: rgba(56, 173, 147, 1);
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  margin-top: 8px;
}
/deep/ .el-form-item__label {
  font-size: 14px;
  color: #000;
  font-weight: bold;
}
.form_box {
  width: 80%;
  margin: 0 auto;
}
.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #38ad93;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #38ad93;
  width: 56px;
  height: 44px;
  line-height: 44px;
  text-align: center;
}
.avatar {
  width: 56px;
  height: 44px;
  display: block;
}
.avatar-uploader-icon2 {
  font-size: 28px;
  color: #38ad93;
  width: 351px;
  height: 192px;
  line-height: 192px;
  text-align: center;
}
.avatar2 {
  width: 351px;
  height: 192px;
  display: block;
}
</style>
